import React, { useState, useCallback } from "react";

// 子组件（使用 React.memo 优化）
const ChildComponent = React.memo(function ChildComponent({ onButtonClick }) {
  console.log("ChildComponent 渲染了!");
  return <button onClick={onButtonClick}>Click me</button>;
});
function Count() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // 每次渲染都会创建新的 handleClick 函数
  //   const handleClick = () => {
  //     setCount(count + 1);
  //   };

  // 使用 useCallback 缓存函数
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // 依赖项：当 count 变化时，创建新函数

  return (
    <div>
      <p>Count: {count}</p>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      {/* <button onClick={handleClick}>Increment</button> */}
      {/* 即使 ChildComponent 使用 React.memo，每次输入时它仍然会重新渲染 */}
      {/* 因为 handleClick 的引用每次都变化 */}
      <ChildComponent onButtonClick={handleClick} />
    </div>
  );
}
export default Count;
